<template>
  <div>
    <el-col :span="16">
      <h2 style="color:red;">正在热映</h2>
      <el-carousel
        :interval="4000"
        type="card"
        height="400px"
        style="width:90%"
      >
        <el-carousel-item
          v-for="item in MovieInfo"
          :key="item.MovieImg"
          style="width:53%;"
        >
          <el-container >
            <el-aside style="width:50%;">
              <img :src="item.MovieImg" style="width:100%;height:400px;" 
              @click="
                SelectMovie(item.MovieID, item.MovieName);
                drawer = true;
              "
               />
            </el-aside>
            <el-main>
              <p style="text-align:center;font-size:35px;font-weight: bold;margin-top:50px;">{{ item.MovieName }}</p>
              <p style="margin-top:45px;">类型：{{ item.MovieType }}</p>
              <br />
              <p>电影时长： {{ item.MovieTime }}</p>
              <br />
              <p>上映时间： {{ item.MovieDate.substring(0, 10) }}</p>
              <br />
              <p>电影地区： {{ item.MovieAddress }}</p>
              <br />
            </el-main>
          </el-container>
        </el-carousel-item>
      </el-carousel>
      <h2 style="color:#409EFF">即将上映</h2>
      <el-row :gutter="30">
        <el-col
          :offset="index > 0 ? 0 : 1"
          :span="4"
          v-for="(o, index) in MovieInfo2.slice(
            (currentPage - 1) * pagesize,
            currentPage * pagesize
          )"
          :key="index"
        >
          <el-card style="width:100%;height:271px;" :body-style="{ padding: '0px' }" shadow="hover">
            <el-button
              style="padding:0"
              @click="
                SelectMovie(o.MovieID, o.MovieName);
                drawer = true;
              "
            >
              <img :src="o.MovieImg" class="image" />
              <div style="padding: 14px;">
                <span>{{ o.MovieName }}</span>
                <div>
                  <el-button type="text" style="float:right">详情</el-button>
                </div>
              </div>
            </el-button>
          </el-card>
        </el-col>
      </el-row>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="5"
        background
        layout="prev, pager, next"
        :total="MovieInfo.length"
        style="float:right;margin-right:10%;"
      ></el-pagination>
      <el-drawer title="电影详情" :visible.sync="drawer" size="40%">
       <MovieInfo :key="id"></MovieInfo>
      </el-drawer>
    </el-col>
    <el-col :span="8">
      <h2>榜单</h2>
      <el-scrollbar>
        <List ></List>
      </el-scrollbar>
    </el-col>
  </div>
</template>
<script>
import List from "@/views/List";
import MovieInfo from "@/views/MovieInfo";
export default {
  components: {
    List,
    MovieInfo
  },
  data() {
    return {
      MovieInfo: [],
      MovieInfo2: [],
      currentPage: 1,
      pagesize: 5,
      height: "",
      drawer: false,
      id: +new Date()
    };
  },
  methods: {
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    },
    SelectMovie(MovieID,Name) {
      
      this.$store.commit("UpdateMovieID", MovieID);
     this.$store.commit("UpdateMovieName",Name);
      this.id = +new Date();
    },
  },
  computed: {},
  mounted() {},
  created() {
    this.Ajax.get("api/MovieInfoes/GetMovieInfos?MovieType=1").then((M) => {
      this.MovieInfo = M.data;
    });
    this.Ajax.get("api/MovieInfoes/GetMovieInfos?MovieType=2").then((M) => {
      this.MovieInfo2 = M.data;
    });
    this.height = window.innerHeight - 100;
  },
};
</script>
<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: white;

}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
